<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
	<title>首页</title>
	<script type="application/javascript" src="/static/js/common.js"></script>
	<style>
		.user-title{
			padding: 35px 20px;
			display: flex;
			background-color: #01a9da;
		}

		.user-title .title-img{
			width:50px;
			height:50px;
		}

		.user-title .title-name{
			padding-left: 10px;
			color: #ffffff;
		}

		.user-title .title-out{
			position: absolute;
			right: 30px;
			cursor: pointer;
		}

	</style>
</head>
<body>
<header class='user-title'>
	<img class="title-img" src="/static/images/head/avatar3.jpg">
	<h1 class="title-name">
		<span th:text="${loginName}"></span>
	</h1>
	<div class="weui-tabbar__icon title-out" lay-active="logout">
		<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-zhuanfa-"></use>
		</svg>
	</div>
</header>
<div class="app-content">
	<div class="weui-grids">
		<a href="/book/add" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-tianjia-1"></use>
				</svg>
			</div>
			<p class="weui-grid__label">
				消费录入
			</p>
		</a>
		<a href="/bill/show-daily-bill" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-sousuo-"></use>
				</svg>
			</div>
			<p class="weui-grid__label">
				今日查询
			</p>
		</a>
		<a href="/book/list-book-by-join" class="weui-grid js_grid">
			<div class="weui-grid__icon">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-geren-"></use>
				</svg>
			</div>
			<p class="weui-grid__label">
				我的参与
			</p>
		</a>
	</div>
	<div class="weui-panel weui-panel_access" id="my_book_show">

	</div>
</div>
<div class="weui-tabbar">
	<a href="/index" class="weui-tabbar__item weui-bar__item--on">
		<div class="weui-tabbar__icon">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-shouye-"></use>
			</svg>
		</div>
		<p class="weui-tabbar__label">首页</p>
	</a>
	<a href="/book/list" class="weui-tabbar__item">
		<div class="weui-tabbar__icon">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-tianjia-"></use>
			</svg>
		</div>
		<p class="weui-tabbar__label">账本</p>
	</a>
	<a href="/search" class="weui-tabbar__item">
		<div class="weui-tabbar__icon">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-shijian-"></use>
			</svg>
		</div>
		<p class="weui-tabbar__label">查询</p>
	</a>
	<a href="/setting" class="weui-tabbar__item">
		<div class="weui-tabbar__icon">
			<svg class="icon" aria-hidden="true">
				<use xlink:href="#icon-geren-"></use>
			</svg>
		</div>
		<p class="weui-tabbar__label">我的</p>
	</a>
</div>

	<script type="application/javascript" charset="utf-8">
		layui.use(['util','layer','laytpl'], function () {
			var $ = layui.$
					,layer = layui.layer
					,laytpl = layui.laytpl
					,util = layui.util;

			$.get("/api/book/list-my-book", {current: 1, size: 3}, function (res) {
				if(res.code === "0" && res.count > 0){
					laytpl($("#my_book").html()).render(res, function (html) {
						$("#my_book_show").html(html);
					})
				}
			});

			util.event('lay-active', {
				logout: function(){
					layer.msg("登出成功", function () {
						location.href = "/api/home/logout";
					});
				}
			});
		})


	</script>

	<script type="text/html" id="my_book">
		<div class="weui-panel__hd">个人记录</div>
		<div class="weui-panel__bd">
			{{# layui.each(d.data, function(index, item){ }}
			<div class="weui-media-box weui-media-box_text">
				<h4 class="weui-media-box__title">￥{{item.consumePrice}}</h4>
				<p class="weui-media-box__desc">
					[{{item.consumeTime}}]
					{{# if(item.close){ }}
						【已结算】
					{{# } }}
					{{item.consumeName}}
				</p>
			</div>
			{{# }); }}
		</div>
		<div class="weui-panel__ft">
			<a href="/book/list" class="weui-cell weui-cell_access weui-cell_link">
				<div class="weui-cell__bd">查看更多&nbsp;&nbsp;共计{{d.count}}条</div>
				<span class="weui-cell__ft"></span>
			</a>
		</div>

	</script>
</body>
</html>
